<?xml version='1.0' encoding='utf-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>usersguide</title>
		<link type="text/css" rel="stylesheet" href="PLUGINS_ROOT/org.polarsys.kitalpha.doc/html/common/style/style.css"/>
	</head>
	<body>
		<h1 id="User.27s_Guide">User's Guide</h1>
		<p>The uses of the MDE Rich Text Widget is easy and straightforward. The user interface is splitted into two sections. The toolbar and the text area.</p>
		<h3 id="Toolbar">Toolbar</h3>
		<p>The toolbar contains tools which helps for formatting the typed text in the text area. For instances it contains bold tool to turn into 
			<b>bold style</b>  the selected text or newly typed characters after activating the tool.
		</p>
		<p>Here, an example of toolbar which contains most used tools</p>
		<p>
			<img title="Toolbar" alt="Toolbar" border="0" src="../img/richtext_toolbar.png"/>
		</p>
		<p>Commonly used Tools (also, called items):</p>
		<table>
			<tr>
				<td>
					<img title="Open in editor" alt="Open in editor" border="0" src="../img/openInEditor.gif"/>
				</td>
				<td>
					<b>Open in Editor</b> 
				</td>
				<td>Allows to open an Eclipse editor which contains a MDE Rich Text Widget binded to the current model element</td>
			</tr>
			<tr>
				<td>
					<img title="Save editor content" alt="Save editor content" border="0" src="../img/save_image.gif"/>
				</td>
				<td>
					<b>Save editor content</b>
				</td>
				<td>Allows to set the content of the editor to the feature of the element associated to the editor</td>
			</tr>
			<tr>
				<td>
					<img title="Refresh editor" alt="Refresh editor" border="0" src="../img/refresh.gif"/>
				</td>
				<td>
					<b>Refresh editor</b>
				</td>
				<td>Allows to refresh the content of the editor</td>
			</tr>
			<tr>
				<td>
					<img title="Style" alt="Style" border="0" src="../img/richtext_styles.png"/>
				</td>
				<td>
					<b>Styles</b>
				</td>
				<td>Allows to apply a style on the selected or typed characters</td>
			</tr>
			<tr>
				<td>
					<img title="Paragraph format" alt="Paragraph format" border="0" src="../img/richtext_paragraph_format.png"/>
				</td>
				<td>
					<b>Paragraph Format</b>
				</td>
				<td>Allows to apply a style on the paragraph</td>
			</tr>
			<tr>
				<td>
					<img title="Font name" alt="Font name" border="0" src="../img/richtext_font.png"/>
				</td>
				<td>
					<b>Font Name</b>
				</td>
				<td>Allows to apply a font on the selected or typed characters</td>
			</tr>
			<tr>
				<td>
					<img title="Font size" alt="Font size" border="0" src="../img/richtext_font_size.png"/>
				</td>
				<td>
					<b>Font Size</b>
				</td>
				<td>Allows to apply a size on the selected or typed characters</td>
			</tr>
			<tr>
				<td>
					<img title="Clipboard" alt="Clipboard" border="0" src="../img/richtext_clipboard.png"/>
				</td>
				<td>
					<b>Clipboard</b>
				</td>
				<td>Allows to cut, copy selected characters, and past new characters in text area</td>
			</tr>
			<tr>
				<td>
					<img title="Toolbar" alt="Toolbar" border="0" src="../img/richtext_clean.png"/>
				</td>
				<td>
					<b>Clean content</b>
				</td>
				<td>Allows to remove all content in text area</td>
			</tr>
			<tr>
				<td>
					<img title="Basic styles" alt="Basic styles" border="0" src="../img/richtext_char_style.png"/>
				</td>
				<td>
					<b>Baisc Styles</b>
				</td>
				<td>Allows to apply a basic style (bold, italic...) on selected or typed characters</td>
			</tr>
			<tr>
				<td>
					<img title="Colors" alt="Colors" border="0" src="../img/richtext_colors.png"/>
				</td>
				<td>
					<b>Colors</b>
				</td>
				<td>Allows to apply text and background color on selected or typed characters</td>
			</tr>
			<tr>
				<td>
					<img title="Paragraph" alt="Paragraph" border="0" src="../img/richtext_paragraph.png"/>
				</td>
				<td>
					<b>Paragraph</b>
				</td>
				<td>Allows to add list (numbered or bulleted) and increase or decrease indentation of selected or typed characters. See 
					<a href="#List_Properties">List Properties</a> section for the customization of list properties
				</td>
			</tr>
			<tr>
				<td>
					<img title="Links" alt="Links" border="0" src="../img/richtext_links.png"/>
				</td>
				<td>
					<b>Links</b>
				</td>
				<td>Allows to add links and pictures. See the 
					<a href="#links_management">Link management</a> section for more information
				</td>
			</tr>
		</table>
		<h3 id="Text_area">Text area</h3>
		<p>The text area is used to add text content, links and images. It looks like following picture</p>
		<p>
			<img title="Text area" alt="Text area" border="0" src="../img/richtext_text_area.png"/>
		</p>
		<p><span id="List_Properties"/></p>
		<h3 id="List_properties">List properties</h3>
		<h5 id="Numbered_List_Properties">Numbered List Properties</h5>
		<p>A default behavior at adding numbered list (
			<img title="Numbered list tool enable" alt="Numbered list tool enable" border="0" src="../img/richtext_numbered_list_tool.png"/>) is enumerating items by decimal as shown below in text area:
		</p>
		<p>
			<img title="Numbered List" alt="Numbered List" border="0" src="../img/richtext_numbered_list.png"/>
		</p>
		<p>To access to the properties of the list, right-click on an item of the list and then, choose 
			<i>Numbered List Properties</i> as shown after:
		</p>
		<p>
			<img title="Numbered List Properties Menu" alt="Numbered List Properties Menu" border="0" src="../img/richtext_numbered_list_properties_menu.png"/>
		</p>
		<p>This window will appear.</p>
		<p>
			<img title="Numbered List Properties" alt="Numbered List Properties" border="0" src="../img/richtext_numbered_list_properties.png"/>
		</p>
		<p>The available customizations are:</p>
		<ol>
			<li>The start index of the list. By default is 1</li>
			<li>The type of enumeration. It could be:
				<ol>
					<li>Decimal (1, 2, ...)</li>
					<li>Lower or upper Roman number(I, II, ...)</li>
					<li>Lower or upper alphabetical order (A, B, ...)</li>
				</ol>
			</li>
		</ol>
		<p>For instance, With Upper roman enumeration and start index to 100:</p>
		<p>
			<img title="Roman enumeration List starts with index 100" alt="Roman enumeration List starts with index 100" border="0" src="../img/richtext_numbered_list_properties_roman.png"/>
		</p>
		<h5 id="Bulleted_List_Properties">Bulleted List Properties</h5>
		<p>A default behavior at adding bulleted list (
			<img title="Bulleted list tool enable" alt="Bulleted list tool enable" border="0" src="../img/richtext_bulleted_list_tool.png"/>) is enumerating items by disc as shown below in text area:
		</p>
		<p>
			<img title="Bulleted List" alt="Bulleted List" border="0" src="../img/richtext_bulleted_list_properties.png"/>
		</p>
		<p>To access to the properties of the list, right-click on an item of the list and then, choose 
			<i>Bulleted List Properties</i> as shown after:
		</p>
		<p>
			<img title="Bulleted List Properties Menu" alt="Bulleted List Properties Menu" border="0" src="../img/richtext_bulleted_list_properties_menu.png"/>
		</p>
		<p>This window will appear.</p>
		<p>
			<img title="Bulleted List Properties" alt="Bulleted List Properties" border="0" src="../img/richtext_bulleted_list_properties_window.png"/>
		</p>
		<p>The available customizations are:</p>
		<ol>
			<li>Circle, which corresponds to non filled disc</li>
			<li>Disc, which corresponds to filled circle</li>
			<li>Square, which corresponds to filled square</li>
		</ol>
		<p>For instance, With square type:</p>
		<p>
			<img title="Square bulleted List" alt="Square bulleted List" border="0" src="../img/richtext_bulleted_list_properties_square.png"/>
		</p>
		<p>
			<i>NB: No Set has the same effect as Decimal or Disc type</i>
		</p>
		<p><span id="links_management"/></p>
		<h3 id="Links_management">Links management</h3>
		<h4 id="links_tool">links tool</h4>
		<p>MDE Rich text provides a tool (
			<img border="0" src="../img/richtext_links_tool.png"/>) for adding links into the contents and in the same way the navigation to the target of the links with the appropriate tool.
		</p>
		<p>The link types allowed are:</p>
		<table>
			<tr>
				<td>URL</td>
				<td>for instance: 
					<a href="http://www.polarsys.org/kitalpha/" target="_blank">http://www.polarsys.org/kitalpha/</a>
				</td>
			</tr>
			<tr>
				<td>File (Absolute Path) 
					<b>not recommended</b>
				</td>
				<td>Choice not recommended if you want to share information and collaborate. Use URL link instead.
					<p>Link to the files on the local disk of the computer. For instance: /home/me/folders/program.c</p>
				</td>
			</tr>
			<tr>
				<td>File (Project Relative Path) 
					<b>not recommended</b>
				</td>
				<td>Choice not recommended if you want to share information and collaborate. Use URL link instead.
					<p>Link to the file in the workspace. For instance: /project.name/model.componentsample</p>
				</td>
			</tr>
			<tr>
				<td>Model Element</td>
				<td>Link to any model element of the resource set of the element being editing.</td>
			</tr>
			<tr>
				<td>Diagram Element</td>
				<td>Link to Sirius Diagrams.</td>
			</tr>
		</table>
		<h5 id="Add_Link_wizard">Add Link wizard</h5>
		<p>Clicking on a Add link item will open this wizard</p>
		<p>
			<img border="0" src="../img/richtext_add_link_wizard.png"/>
		</p>
		<p>The first field 
			<b>Add link</b> specifies the type of the link to add (See before)
		</p>
		<p>The second field 
			<b>URL</b> specifies the concrete location (for instance, with URL type, www.polarsys.org). This field shows a Browse button. This button allows to select the link's target of the 
			<i>File (Absolute or Project Relative Path</i>, 
			<i>Model or Diagram element</i> types.
			For the 
			<i>Model or Diagram Element</i> URL type, this field is in read only mode. The user, must use the 
			<b>Browse</b> button to select the target of the links 
		</p>
		<p>The third field 
			<b>URL Display</b> allows to the user to give a humain readable content of the link. This will be appears in the text area of the widget. For instance, the URL: 
			<a href="/wiki/www.polarsys.org" title="www.polarsys.org">www.polarsys.org</a>, the displayed text will be 
			<a href="/wiki/http://www.polarsys.org" title="http://www.polarsys.org">Polarsys</a>.
		</p>
		<h5 id="Navigation">Navigation</h5>
		<p>Navigation refers to the opening of the target of the links with the appropriate tool.</p>
		<p>For example, navigation on the URL type link opens the target with the default browser</p>
		<p>To navigate to the target of a link, righ-click on the link and choose the menu 
			<i>Open Link</i>
		</p>
		<p>
			<img border="0" src="../img/richtext_open_link_menu.png"/>
		</p>
	</body>
</html>